<!-- fileinput -->
<link href="/vendors/bootstrap-fileinput/css/fileinput.css" rel="stylesheet"/>
<!--bootstrap-->
<link rel="stylesheet" type="text/css" href="/vendors/bootstrap/dist/css/bootstrap.css">

<div id="hotelDetailDiv">
    <h4>酒店简介</h4>

    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <h5>客房总数</h5>
            <form class="form-inline">
                <label>
                    <input type="number" class="form-control mb-2 mr-sm-2" v-model:value="detail.roomNumber"/>
                </label>间
            </form>
        </div>
    </div>



    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <h5>联系方式</h5>
            <div class="form-group">
                <label for="hotelContactName">联系人姓名</label>
                <input type="text" class="form-control" id="hotelContactName" placeholder="请填写您的联系人姓名"
                       v-model:value="detail.contactName">
            </div>
            <div class="form-group">
                <label for="hotelContactPhone">联系方式</label>
                <input type="number" class="form-control" id="hotelContactPhone" placeholder="请填写您的手机号码"
                       v-model:value="detail.contactPhone">
            </div>
        </div>
    </div>
    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <h5>简介</h5>
            <div class="form-group">
                <label for="hotelDetail">简介详情</label>
                <textarea rows="5" class="form-control" id="hotelDetail" placeholder="请填写您的酒店简介详情"
                          v-model:value="detail.detailDetail">
            </textarea>
            </div>
            <div class="form-group">
                <label>酒店基础图片</label>
                <input id="uploadImage" name="file" type="file" multiple=true>
            </div>
        </div>
    </div>

    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <h5>开业年份</h5>
            <div class="input-group date">
                <input type="text" class="datepicker" onfocus="this.blur();" placeholder="----年--月" id="startingYear" v-model:value="detail.startingYear">
            </div>
        </div>
        <div class="card-body">
            <h5>装修年份</h5>
            <div class="input-group date">
                <input type="text" class="datepicker" onfocus="this.blur();" placeholder="----年--月" id="decoratedYear" v-model:value="detail.decoratedYear">
            </div>
        </div>
    </div>


    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <button type="button" class="btn-primary" onclick="saveInfo()">保存</button>
        </div>
    </div>
</div>

<!-- fileinput -->
<script src="/vendors/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="/vendors/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script>


<style>
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }
</style>

<script>
    var hotelDetailVue = new Vue({
        el: "#hotelDetailDiv",
        data: {
            detail: {
                user: {
                    userId: $("#userId").val()
                },
                startingYear: "",
                decoratedYear: "",
                roomNumber: 0,
                contactName: "",
                contactPhone: "",
                detailDetail: "",
                detailImages: []
            }
        },
        methods: {
            initImage: function () {
                var self = this;
                $("#uploadImage").fileinput({
                    language: "zh",
                    uploadUrl: "/api/upload/hotelDetail",
                    allowedFileExtensions: ["png", "jpg", "jpeg", "ico", "bmp", "gif"],
                    showUpload: true,
                    showRemove: false,
                    showPreview: true,
                    showCaption: true,
                    browseClass: "btn btn-primary",
                    removeClass: "btn btn-danger",
                    dropZoneEnabled: true,
                    maxFileCount: 5,
                    autoReplace: true,//是否可替换
                    layoutTemplates: {
                        actionUpload: ''
                    },
                    enctype: 'multipart/form-data',
                    msgFilesTooMany: "选择上传的文件数量 超过允许的最大数值！",
                    validateInitialCount: true,
                }).on('fileerror', function (event, data, msg) {
                    layer.alert("Upload file failed" + msg, {icon: 0});
                }).on('fileuploaded', function (event, data) {
                    if (data.response.status === 200) {
                        console.log(data.response.data)
                        self.detail.detailImages.push({"image": data.response.data})
                    } else {
                        $(".fileinput-remove-button").click();
                    }
                    layer.alert(data.response.message, {icon: 0});
                }).on('fileclear', function (event) {
                });
            },
            initDatepicker: function () {
                $(".datepicker").datepicker({
                    format: 'yyyy年-mm月',
                    language: "zh-CN",
                    autoclose: true,
                    startView: 2,
                    minViewMode: 1,
                    maxViewMode: 2
                });
            },
            saveInfo: function () {
                var self = this;
                self.detail.decoratedYear = $("#decoratedYear").val();
                self.detail.startingYear = $("#startingYear").val();
                var pReg = /^0?(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/;
                // console.log(self.detail);
                if (self.detail.startingYear === "") {
                    layer.alert("开业年月不能为空", {icon: 0});
                } else if (self.detail.decoratedYear === "") {
                    layer.alert("装修年月不能为空", {icon: 0});
                } else if (self.detail.roomNumber === 0) {
                    layer.alert("房间数量不能为0", {icon: 0});
                } else if (self.detail.contactName === "") {
                    layer.alert("联系人不能为空", {icon: 0});
                } else if (self.detail.contactPhone === "") {
                    layer.alert("联系电话不能为空", {icon: 0});
                } else if (!pReg.test(self.detail.contactPhone)) {
                    layer.alert("联系电话格式不正确", {icon: 0});
                } else if (self.detail.detailDetail === "") {
                    layer.alert("简介详情不能为空", {icon: 0});
                } else if (self.detail.detailImages.length === 0) {
                    layer.alert("酒店基础图片不能为空，请在选择完图片之后点击上传按钮", {icon: 0});
                } else {
                    $.ajax({
                        url: "/api/detail",
                        type: "post",
                        contentType: "application/json",
                        data: JSON.stringify(self.detail),
                        success: function (rs) {
                            if (rs.status === 200) {
                                self.detail = {
                                    user: {
                                        userId: $("#userId").val()
                                    },
                                    startingYear: "",
                                    decoratedYear: "",
                                    roomNumber: 0,
                                    contactName: "",
                                    contactPhone: "",
                                    detailDetail: "",
                                    detailImages: []
                                }
                                $(".fileinput-remove").click()
                                layer.alert("提交成功", {icon: 0});
                            } else {
                                layer.alert(rs.message, {icon: 0});
                            }
                        },
                        error: function (rs) {
                            layer.alert(rs.responseText, {icon: 0});
                        }
                    })
                }
            }
        },
        created: function () {
            window.saveInfo = this.saveInfo;
        },
        mounted: function () {
            this.initImage();
            this.initDatepicker();
        }
    })
</script>
